<template>
  <ul class="search-history-list" v-show="list.length">
    <li
      v-for="(item, index) in list"
      :key="index"
      @click="selectItem(item)"
      >
      <span>{{item}}</span>
      <i
        class="icon-delete"
        @click.stop="handleDelete(item)"
        ></i>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'search-list',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    selectItem (item) {
      this.$emit('select', item)
    },
    handleDelete (item) {
      this.$emit('delete', item)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .search-history-list {
    margin-top: 12px
    li {
      line-height: 36px
      color: $color-text-l
      font-size: $font-size-medium
      .icon-delete {
        float: right
        font-size: $font-size-small
        line-height: 36px
        color: $color-text-d
        margin-right: 2px
      }
    }
  }
</style>
